<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.dictLabel" :name="index.toString()" v-for="(item, index) in list">
        <ArticleType :ref="index.toString()" :agreementInfo="agreementInfo" :articleType="item.dictValue" :statusList="dict.type.sys_normal_disable"></ArticleType>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { checkArticleUnique } from "@/api/market/article";
import { getDicts } from "@/api/system/dict/data";
import ArticleType from './components/ArticleType'
export default {
  name: "ArticleGuide",
  dicts: ['sys_normal_disable'],
  components: { ArticleType },
  data() {
    return {
      activeName: '0',
      agreementInfo: {},
      list: [],
      currentValue: '',
    };
  },
  watch: {
  },
  created() {
    this.init()
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      this.currentValue = this.list[parseInt(tab.index)].dictValue
      this.getData()
    },
    init(){
      getDicts('app_agreement_type').then(res => {
        this.list = res.data
        this.currentValue = this.list[0].dictValue
        this.getData()
      })
    },
    getData(){
      checkArticleUnique({articleType: this.currentValue}).then(response => {
        this.agreementInfo = response.data;
      });
    }
  }
};
</script>